<template>
  <div class="exam-container">
    <el-skeleton :loading="data.isLoading" ref="isLoading" :rows="15" animated>
      <div class="top">
        <div class="minibox bg_one">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="data.data_one.lineCount"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，人在线
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="data.data_one.allCount"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，用户数
          </div>
        </div>
        <div class="minibox bg_two">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="data.data_two.count"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，场考试
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="data.data_two.avg"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，平均分
          </div>
        </div>
        <div class="minibox bg_their">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="data.data_their.tpCount"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，套试卷
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="data.data_their.queCount"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >， 题目数
          </div>
        </div>
      </div>
      <el-divider />

      <div ref="myChart" id="myChart" :style="{ width: '1000px', height: '400px' }"></div>
      <el-divider />

      <div ref="myChart_two" id="myChart_two" :style="{ width: '1000px', height: '400px' }"></div>
      <el-divider />

      <div
        ref="myChart_their"
        id="myChart_their"
        :style="{ width: '1000px', height: '400px' }"
      ></div>
      <el-divider />
    </el-skeleton>
  </div>
</template>

<script lang="ts" setup>
import { getExamStatistics, getQuestionStatistics, getUserStatistics } from '../../api/index'
import {
  defineComponent,
  reactive,
  toRefs,
  watchEffect,
  getCurrentInstance,
  onMounted,
  ref
} from 'vue'
import { CountTo } from 'vue3-count-to'
let internalInstance: any = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
let data = reactive({
  isLoading: true,
  /**
   * 用户人数
   */
  data_one: {
    allCount: 0,
    lineCount: 0
  },
  /**
   * 考试数据
   */
  data_two: {
    avg: 0,
    count: 0,
    data: []
  },
  /**
   *试卷数据
   */
  data_their: {
    tpCount: 0,
    queCount: 0,
    data: []
  }
})

// let data={
//         data_one:{},

// };

let getUserStatistic = () => {
  Promise.all([getUserStatistics({}), getExamStatistics({}), getQuestionStatistics({})]).then(
    (res: any) => {
      // console.log(res)
      data.data_one = res[0].data
      data.data_two = res[1].data
      data.data_their = res[2].data
      data.isLoading = false

      const dom = document.getElementById('myChart')
      const myChart = echarts.init(dom) // 初始化echarts实例
      res[0].data.data.reverse()
      let dateTIme = res[0].data.data.map((d: any) => d.date)
      let count = res[0].data.data.map((d: any) => d.count)

      const option = {
        title: {
          text: '近7天在线人数'
        },
        xAxis: {
          type: 'category',
          data: dateTIme
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: count,
            type: 'line',
            smooth: true
          }
        ],
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          }
        }
      }
      // 设置实例参数
      myChart.setOption(option)

      let dateTIme_two = res[1].data.data.map((d: any) => d.date)
      let count_two = res[1].data.data.map((d: any) => d.count)

      const dom_two = document.getElementById('myChart_two')
      const myChart_two = echarts.init(dom_two) // 初始化echarts实例

      const option_two = {
        title: {
          text: '近7天考试次数'
        },
        xAxis: {
          type: 'category',
          data: dateTIme_two
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: count_two,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ],
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          }
        }
      }
      myChart_two.setOption(option_two)

      const dom_their = document.getElementById('myChart_their')
      const myChart_their = echarts.init(dom_their) // 初始化echarts实例

      let data_name = res[2].data.data.map((d: any) => d.name)

      let scores = res[2].data.data.map((d: any) => d.score)

      const option_their = {
        title: {
          text: '最近考试评分'
        },
        xAxis: {
          type: 'category',
          data: data_name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: scores,
            type: 'line'
          }
        ],
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          }
          //  axisPointer: { // 坐标轴虚线
          //    type: 'cross',
          //    label: {
          //        backgroundColor: '#6a7985'
          //    }
          //  },
        }
      }
      // 设置实例参数
      myChart_their.setOption(option_their)
    }
  )
}

onMounted(() => {
  getUserStatistic()
})

watchEffect(() => {
  getUserStatistic()
})
</script>



<style scoped>
.top {
  width: 100%;
  display: flex;
  /* flex-wrap: wrap; */
}

.minibox {
  color: #fff;
  font-size: 20px;
  flex: 1;
  margin-left: 10px;
  background: red;
  height: 120px;
  margin-top: 10px;
  text-align: center;
  border-radius: 4px;
  line-height: 60px;
}

.bg_one {
  background-color: rgb(116, 205, 72);
}

.bg_two {
  background-color: rgb(121, 187, 255);
}

.bg_their {
  background-color: rgb(230, 162, 60);
}

.bg_one_top {
  border-bottom: 1px solid #eee;
  margin-left: 5%;
  float: left;
  width: 90%;
  height: 50%;
  text-align: center;
}

/* .bg_one_bottom{
    border-top: 1px solid #eee;
     float: left;
     margin-left: 5%;
     width: 90%; 
     height: 50%;
      text-align: center;
  } */
</style>
